<template>
  <div class="preveiw">
    <div class="model">
      <div class="model-header">
        <div>模板名称：{{ modeForm.value1 }}</div>
        <div>已创建标识数：<span style="color: red;">用接口数据替换</span></div>
      </div>

      <el-form
        ref="modeFormRef"
        :rules="modeFormRules"
        :model="modeForm"
        style="text-align: center"
        label-width="100px"
        label-position="top"
      >        
        <div class="model-detail">
          <!-- 名称 -->
          <el-form-item style="text-align: center" label="" prop="value2">
            <model-title v-model:value2="modeForm.value2"></model-title>
          </el-form-item>

          <!-- 图片视频上传 -->
          <el-form-item style="text-align: center" label="" prop="value3">
            <modelSwiperPreview v-model:value3="modeForm.value3"></modelSwiperPreview>
          </el-form-item>

          <!-- table -->
          <el-form-item style="text-align: center" label="" prop="value4">
            <modelTablePreview v-model:value4="modeForm.value4"></modelTablePreview>
          </el-form-item>

          <!-- opetate -->
          <el-form-item style="text-align: center" label="" prop="value5">
            <model-operate v-model:value5="modeForm.value5"></model-operate>
          </el-form-item>

          <!-- content -->
          <el-form-item style="text-align: center" label="" prop="value6">
            <model-content v-model:value6="modeForm.value6"></model-content>
          </el-form-item>

          <!-- map -->
          <el-form-item style="text-align: center" label="" prop="value7">
            <model-map v-model:value7="modeForm.value7"></model-map>
          </el-form-item>

          <!-- file -->
          <el-form-item style="text-align: center" label="" prop="value8">
            <model-file v-model:value8="modeForm.value8"></model-file>
          </el-form-item>

          <!-- icon bottom -->
          <div class="model-detail-bottom">
            <div class="model-detail-bottom-item">
              <Share class="model-detail-bottom-item-icon"></Share>
              分享
            </div>
            <div class="model-detail-bottom-item">
              <Star class="model-detail-bottom-item-icon"></Star>
              收藏
            </div>
          </div>
        </div>
        <!-- <el-button type="primary" style="margin-top: 2rem" @click="saveTemplate"
          >保存模板</el-button
        > -->
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, onMounted, onUnmounted } from "vue";
import "@/utils/style/modelStyle.scss";
import modelTitle from "../template/model-title.vue";
import modelSwiperPreview from "../template/model-swiper-preview.vue";
import modelTablePreview from "../template/model-table-preview.vue";
import modelOperate from "../template/model-operate.vue";
import modelContent from "../template/model-content.vue";
import modelMap from "../template/model-map.vue";
import modelFile from "../template/model-file.vue";
defineOptions({ name: "modelView" });
const modeFormRef = ref(null);
const modeFormRules = reactive({
  value1: [{ required: true, message: "请输入", trigger: "blur" }],
  value2: [{ required: true, message: "请输入", trigger: "blur" }],
  value3: [{ required: true, message: "请输入", trigger: "blur" }],
  value4: [{ required: true, message: "请输入", trigger: "blur" }],
  value5: [{ required: true, message: "请输入", trigger: "blur" }],
  value6: [{ required: true, message: "请输入", trigger: "blur" }],
});
const modeForm = defineModel("modeForm");

const title = ref(null);
const saveTemplate = () => {
  // console.log(777,modeForm.value);

  if (!modeForm.value) return;
  modeFormRef.value.validate((valid) => {
    if (valid) {
      // console.log(modeForm.value);
    } else {
      // console.log("error submit!!");
      return false;
    }
  });
};

onUnmounted(() => {
  console.log("unmounted");
});

onMounted(() => {
  console.log("mounted");
  // 移动到template model-title
  //title添加鼠标hover事件监听
  if (title.value) {
    // mouseHover不生效
    // title.value.addEventListener("mouseover", () => {
    //   modeForm.value.value2 = "请输入名称";
    // });
  }
});
</script>

<style lang="scss"></style>
